iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0
自我挑戰組

30天的css animation修練系列 第 5

初探 css animation - 進擊的 @keyframes 襲來

  • 分享至 

  • xImage
  •  

上一篇提到 @keyframes 裡面可以放 width。
這篇要來深入了解到底還有什麼特性可以寫在 @keyframes 裡面,以下稍微依功能做了整理。
其實這些根本幾乎是全部的 css 了啊

基本上下面列出所有的 css 屬性都可以寫到 @keyframes 裡,不過這邊有一點要稍微注意下,就是在 @keyframes 裡面寫 !important 是完全不會有效果的。

背景系列

backdrop-filter
background
background-color
background-position
background-size

邊線( border )系列

border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
border-color
border-left
border-left-color
border-left-width
border-radius
border-right
border-right-color
border-right-width
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
border-width

位置系列

bottom
left
right
top

陰影系列

box-shadow
text-shadow

遮罩系列

clip
clip-path
mask
mask-border
mask-position
mask-size

濾鏡系列

filter

flex 相關

flex
flex-basis
flex-grow
flex-shrink
order

文字相關

caret-color (鍵入游標)
color
font
font-size
font-weight
text-decoration
text-decoration-color

長寬尺寸系列

height
width
max-height
max-width
min-height
min-width

間距行高系列

letter-spacing
line-height
word-spacing
text-indent (段落內縮)

margin & padding 系列

margin
margin-bottom
margin-left
margin-right
margin-top
padding
padding-bottom
padding-left
padding-right
padding-top

透明度

opacity

outline 系列

outline
outline-color
outline-offset
outline-width

透視(消失點)相關

perspective
perspective-origin

圖文排版

shape-image-threshold
shape-margin
shape-outside

旋轉變形相關

rotate
transform
transform-origin
scale

對齊相關

vertical-align

可視度相關

visibility

元素堆疊相關

z-index

專屬某特定瀏覽器系列

-moz-outline-radius
-moz-outline-radius-bottomleft
-moz-outline-radius-bottomright
-moz-outline-radius-topleft
-moz-outline-radius-topright
-webkit-text-fill-color
-webkit-text-stroke
-webkit-text-stroke-color

跟 column-count 有關的系列

個人覺得使用機率也算低
column-count
column-gap
column-width
columns
column-rule
column-rule-color
column-rule-width
gap
grid-column-gap
grid-gap
grid-row-gap
row-gap

基本上不常用/部分瀏覽器不支援/實驗階段/冷僻系列

基本上可以跳過 嘿嘿
all
font-size-adjust
font-stretch
font-variation-settings
inset-block-end
inset-block-start
inset-inline-end
inset-inline-start inset-block-end
inset-block-start
inset-inline-end
inset-inline-start
line-clamp
max-lines
motion-offset
motion-rotation
object-position
offset-position
scroll-snap-coordinate
scroll-snap-destination
tab-size
text-emphasis
text-emphasis-color
translate
zoom

參考資料
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties


上一篇
初探 css animation - 時間軸跟關鍵影格
下一篇
實作 css animation - 我是天空裡的一片雲 飄移雲朵應用
系列文
30天的css animation修練30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言